<!-- 示例1: 基本行布局 -->
<template>
  <div>
    <h2>1. 基本行布局</h2>
    <FlexContainer>
      <div v-for="n in 3" :key="n" class="box">Item {{ n }}</div>
    </FlexContainer>
    <h2>2. 列布局居中</h2>
    <FlexContainer
        flex-direction="column"
        justify-content="center"
        align-items="center"
        gap="10px"
        style="height: 300px; border: 1px solid #ccc;"
    >
      <div v-for="n in 3" :key="n" class="box">Item {{ n }}</div>
    </FlexContainer>
    <h2>3. 换行布局</h2>
    <FlexContainer
        flex-wrap="wrap"
        gap="20px"
        @resize="handleResize3"
    >
      <div v-for="n in 8" :key="n" style="width: 200px" class="box">Item {{ n }}</div>
    </FlexContainer>
    <h2>4. 响应式布局</h2>
    <FlexContainer
        :flex-direction="isMobile ? 'column' : 'row'"
        :gap="isMobile ? '10px' : '20px'"
    >
      <div v-for="n in 4" :key="n" class="box">Item {{ n }}</div>
    </FlexContainer>
    <h2>5. 事件处理</h2>
    <FlexContainer
        @child-added="handleChildAdded"
        @child-removed="handleChildRemoved"
        @resize="handleResize5"
        style="border: 1px solid #ddd; padding: 10px;"
    >
      <div v-for="item in items" :key="item" class="box">{{ item }}</div>
    </FlexContainer>
    <button @click="addItem">Add Item</button>
    <button @click="removeItem">Remove Item</button>
  </div>

</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import FlexContainer from '@/components/Flexbox/FlexContainer.vue'

//3
const handleResize3 = (size) => {
  console.log('Container size changed:', size)
}
//4
const isMobile = ref(false)

const checkMobile = () => {
  isMobile.value = window.innerWidth < 768
}

onMounted(() => {
  window.addEventListener('resize', checkMobile)
  checkMobile()
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})

//5
const items = ref(['A', 'B', 'C'])

const addItem = () => {
  items.value.push(String.fromCharCode(65 + items.value.length))
}

const removeItem = () => {
  if (items.value.length > 0) {
    items.value.pop()
  }
}

const handleChildAdded = (element) => {
  console.log('Child added:', element)
  element.style.backgroundColor = '#e3f2fd'
}

const handleChildRemoved = (element) => {
  console.log('Child removed:', element)
}

const handleResize5 = ({ width, height }) => {
  console.log(`New container size: ${width}x${height}`)
}
</script>

<style>
.box {
  padding: 20px;
  background: #eee;
  margin: 5px;
}
h2{
  margin-top: 20px;
}
</style>

